<template>
  <Table
    ref="tableRef"
    name="carList"
    v-model:page="req.pageIndex"
    v-model:size="req.pageSize"
    stripe
    remote
    :columns="columns"
    :buttons="buttonsArray"
    :buttons-space="50"
    :data="tableData"
    :search-config="{
      control: searchControl, // 控件
      fields: req,
    }"
    @search="search"
    @reset="reset"
    @page="getList"
  >
    <!-- <template #buttons>
      <el-space :size="20">
        <Button type="primary" size="small" :beforeChange="change">新增</Button>
        <Button type="primary" :beforeChange="change">删除</Button>
        <Button type="primary" :beforeChange="change"></Button>
        <Button type="primary" :beforeChange="change"></Button>
      </el-space>
    </template> -->
    <template #orderState="data">
      <Tab :type="orderStateOption.useEnumItem(data.rowData.orderState)?.type">{{ orderStateOption.useEnumItem(data.rowData.orderState)?.label || '' }}</Tab>
    </template>
    <template #name="data">
      <div @click="openName">默认插槽asdfasdf---{{ data.rowData.title }}</div>
    </template>
    <template #sex="data">
      <div>{{ data.rowData.title }}</div>
    </template>
  </Table>
  <Detailed v-model:open="state.open" v-if="state.open" title="用户的详情" />
  <FormDialog v-model:open="state.form" v-if="state.form" title="用户的详情" @ok="getList" />
</template>
<script lang="ts">
  export default { name: 'demoIndex' }
</script>
<script lang="ts" setup>
  import { useTable } from '@/hooks'
  import { useOptions } from './options'
  // components
  import Detailed from './component/detailed.vue'
  import FormDialog from './component/form/index.vue'
  /**
   * api
   */
  import { addOrder } from '@/api/order'

  /**
   * state
   */
  const tableData = ref<DataInterface[]>([])
  const state = reactive({
    open: false,
    form: false,
  })
  /**
   * hooks
   */
  const { tableRef, usePage, useSize, useTableLoadingStart, useTableLoadingEnd, useSetTotal, useTableSearch, useTableReset } = useTable()
  const { columns, buttonsArray, searchControl, orderStateOption } = useOptions()

  /**
   * event
   */
  const change = () => {
    return new Promise<void>((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 1000)
    })
  }

  const openName = () => {
    state.open = true
  }

  const req = reactive({
    pageIndex: usePage,
    pageSize: useSize,
    orderNo: '111',
    orderState: [],
    carNo: '',
  })
  /**
   * 列表数据
   */
  const getList = () => {
    addOrder(req)
    useTableLoadingStart()
    setTimeout(() => {
      tableData.value = [
        {
          id: 10001,
          name: 'Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1Test1',
          role: 'Deve<br />lop',
          sex: 'Man',
          age: 28,
          address: 'test abc',
          orderState: 1,
        },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou', orderState: 2 },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai', orderState: 3 },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', orderState: 4 },
        { id: 10001, name: 'Test1', role: 'Deve<br />lop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      ]
      useTableLoadingEnd()
      useSetTotal(100)
    }, 1500)
  }
  /**
   * 搜索
   */
  const search = () => {
    useTableSearch()
    getList()
  }
  /**
   * 重置
   */
  const reset = () => {
    useTableReset()
    getList()
  }
  /**
   * 生命周期
   */
  onMounted(() => getList())
</script>
